﻿<!DOCTYPE html>
<html>
<head>
    <title>minGrid</title>
    <link href="jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
    <link href="mingrid.css" rel="stylesheet" type="text/css" />
    <link href="benchmarks.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.6.2.js"></script>
    <script src="jquery-ui-1.8.16.custom.js"></script>
    <script src="mingrid.js"></script>
    <script src="benchmarks.js"></script>
</head>
<body>
    <div>
        <style>
            body
            {
                font-size: 0.6em;
                font-family: Verdana;
            }
            .demo #grid
            {
                font-size: 0.90em;
            }
            button.action
            {
                width: 80px;
            }
            #selectable .ui-selecting
            {
                background: #FECA40;
            }
            #selectable .ui-selected
            {
                background: #F39814;
                color: white;
            }
            #selectable
            {
                list-style-type: none;
                margin: 0;
                padding: 0;
                width: 60%;
            }
            #selectable li
            {
                margin: 3px;
                padding: 0.4em;
                font-size: 1.0em;
                height: 18px;
                border: 1px solid #aaa;
            }
        </style>
        <script type="text/javascript">


            var grid_width = 400;
            $(function () {
                var data = generateData(100, 6);
                render(data);                
            });        

            var gridLoad = function (event, ui) {
                $("li", "#dropped-columns").remove();
                var droppedcolumns = $("#grid").mingrid("droppedColumns");
                for (var d in droppedcolumns) {
                    $("#dropped-columns").append("<li>" + droppedcolumns[d]['name'] + "</li>");
                }
            };

            function render(data) {
                var columns = {};
                columns = jQuery.ui.mingrid.autoGenerateColumnDefinitions(data[0], "60px");
                $("div.place").append("<div id='grid'></div>");
                $("#grid").mingrid({
                    source: data,
                    width: grid_width,
                    height: 300,
                    columns: columns,
                    autoLayout: true,
                    isDraggable: true,
                    load: gridLoad
                });
            };

            var generateData = (function () {
                var Item = function () { };
                return function (n, m) {
                    var items = [];
                    for (var i = 0; i < n; i++) {
                        var item = new Item();
                        for (var j = 0; j < m; j++) {
                            item["field" + j] = Math.floor(Math.random() * 10000000) / 100;
                        }
                        items.push(item);
                    }
                    return items;
                };
            } ());

         

        </script>
        <div class='demo'>
            <div>
                <p>
                  This is a demo with jQuery UI draggable and droppable interactions enabled on the grid to allow
                  drag-and-drop column reordering.
                </p>
                <label>
                    code:</label>
                <p>
                    <pre class='brush:js'>
              
                </pre>
                </p>
            </div>
            <div>
                
                <div class='place'>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
